<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="1200px"
    @close="close"
  >
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span id="sss3">
                选择测点、运算符、数字组成报警规则如：电流(A)&lt;100
              </span>
            </div>
            <div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <FactTree
                      ref="factTree"
                      @fetch-data="getSelectedTreeNode"
                    ></FactTree>
                  </div>
                </el-col>
                <el-col :span="16">
                  <!-- 运算符号-->
                  <div class="radius" style="margin-top: 20px">
                    <el-row>
                      <el-button
                        v-for="(data, key) in childMenu"
                        :key="key"
                        style="margin-top: 2px"
                        size="mini"
                        plain
                        @click="expitemClick('var', data)"
                      >
                        {{ data.mearpiontdesc }}({{ data.mearpiontunit }})
                      </el-button>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div>
            <!-- 运算符号-->
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-card class="box-card2">
                    <div slot="header" class="clearfix">
                      <span>运算符</span>
                    </div>
                    <div class="text item">
                      <el-row>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '&&')"
                        >
                          &&(并且)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '||')"
                        >
                          ||(或者)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '>')"
                        >
                          >(大于)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '>=')"
                        >
                          >=(大于等于)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '<')"
                        >
                          &lt;(小于)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '<=')"
                        >
                          &lt;=(小于等于)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '==')"
                        >
                          ==(等于)
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('operator', '!=')"
                        >
                          !=(不等于)
                        </el-button>
                      </el-row>
                    </div>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-card class="box-card2">
                    <div slot="header" class="clearfix">
                      <span>数字</span>
                    </div>
                    <div class="text item">
                      <el-row>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '7')"
                        >
                          7
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '8')"
                        >
                          8
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '9')"
                        >
                          9
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '+')"
                        >
                          +
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '4')"
                        >
                          4
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '5')"
                        >
                          5
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '6')"
                        >
                          6
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '-')"
                        >
                          -
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '1')"
                        >
                          1
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '2')"
                        >
                          2
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '3')"
                        >
                          3
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '*')"
                        >
                          *
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '0')"
                        >
                          0
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '.')"
                        >
                          .
                        </el-button>
                        <el-button
                          style="margin-top: 2px"
                          size="mini"
                          plain
                          @click="expitemClick('digit', '/')"
                        >
                          /
                        </el-button>
                      </el-row>
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </div>
          <div>
            <!-- 监控规格-->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>报警规则</span>
                <el-button
                  type="primary"
                  round
                  size="mini"
                  style="float: right"
                  @click="deleteitem(true)"
                >
                  清空
                </el-button>
                <el-button
                  type="danger"
                  round
                  size="mini"
                  style="float: right; padding-left: 20px; margin-left: 10px"
                  @click="deleteitem(false)"
                >
                  删除
                </el-button>
              </div>
              <div
                id="expresion"
                class="text item"
                v-html="expitemcharshow"
              ></div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit } from '@/api/sysaccount'
  import { getDeptlistTree } from '@/api/SysDept'
  import { getDeviceMeasPointList } from '@/api/Factorymodel'
  import FactTree from './FactTree'
  export default {
    name: 'RoleManagementEdit',
    components: { FactTree },
    data() {
      return {
        expitemcharshow: '',
        expitems: [],
        childMenu: [],
        deptdata: [],
        form: {
          id: '',
          enable: '1',
          sex: '1',
          own_nickname: '',
          dept: '',
          email: '',
          mobileno: '',
          accname: '',
        },
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      //this.getDeptlist()
    },
    methods: {
      deleteitem(flag) {
        if (flag) {
          this.expitems = []
        } else {
          this.expitems.pop()
        }
        this.expitemShow()
      },
      expitemShow() {
        let temps = ''
        this.expitems.forEach(function (obj) {
          if (obj.itemtype === 'var') {
            temps =
              temps +
              obj.value.mearpiontdesc +
              '(' +
              obj.value.mearpiontunit +
              ')'
          } else if (obj.itemtype === 'operator' || obj.itemtype === 'digit') {
            temps = temps + obj.value
          }
        })
        //console.log(temps);
        this.expitemcharshow = temps
      },
      expitemClick(type, node) {
        this.expitems.push({ itemtype: type, value: node })
        this.expitemShow()
      },
      handleNodeClick() {
        this.form.dept = this.$refs['cascaderAddr'].getCheckedNodes()[0].data.id
      },
      showEdit(row) {
        console.log(row)
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        //this.$refs['form'].resetFields()
        //this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$emit('getexpress', {
          expchar: this.expitemcharshow,
          expitems: this.expitems,
        })
        this.dialogFormVisible = false
      },
      async getSelectedTreeNode(node) {
        console.log('getSelectedTreeNode method>')
        console.log(node)
        if (node.nodetype == '5') {
          //console.log(ctx.data.exphtml);

          this.listLoading = true
          const { data } = await getDeviceMeasPointList({
            currentnode: node.id,
            rows: 100,
          })
          this.childMenu = data.list
          setTimeout(() => {
            this.listLoading = false
          }, 300)
        }
      },
      async getDeptlist() {
        this.listLoading = true
        const { data } = await getDeptlistTree(this.queryForm)
        this.deptdata = data
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 560px;
  }
  .box-card2 {
    width: 240px;
  }
  .el-checkbox-width {
    width: 80px;
    height: 25px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
